<template>
    <ul class="children-list clearfix">
        <li v-for="(goods,index) in list" :key="index" :class="{ 'first': index==0 }">
            <router-link to="/">
                <div class="figure figure-thumb">
                    <img :src="goods.img"
                         alt="" width="160" height="110">
                </div>
                <div class="title"><span>{{goods.title}}</span></div>
                <p class="price"><span>{{goods.price}}</span></p>
            </router-link>
        </li>
        <!--<li class="first">
            <router-link to="/">
                <div class="figure figure-thumb">
                    <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb=1&amp;w=160&amp;h=110&amp;f=webp&amp;q=90"
                         alt="小米10 Pro" width="160" height="110">
                </div>
                <div class="title"><span>小米10 Pro</span></div>
                <p class="price"><span>4999元起</span></p>
            </router-link>
        </li>
        <li>
            <router-link to="/">
                <div class="figure figure-thumb">
                    <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb=1&w=160&h=110&f=webp&q=90"
                         alt="小米10 Pro" width="160" height="110">
                </div>
                <div class="title"><span>小米10 Pro</span></div>
                <p class="price"><span>4999元起</span></p>
            </router-link>
        </li>-->
    </ul>
</template>

<script>
    export default {
        name: "GoodList",
        data() {
            var _this = this;
            let url ='';
            if(this.goodId==0){
                url='json/1.json'
            }else {
                url='json/2.json'
            }
            this.$http.get(url).then(function (res) {
                _this.list = res.data;
            });
            return {
                list: []
            }
        },
        methods:{

        },
        props:{
            goodId: Number,
        },
        watch:{
            goodId(){
                let _this = this;
                let url ='';
                if(this.goodId==0){
                    url='json/1.json'
                }else {
                    url='json/2.json'
                }
                this.$http.get(url).then(function (res) {
                    _this.list = res.data;
                });
                return {
                    list: []
                }
            }
        }
    }
</script>

<style scoped>
    .header .header-nav-menu .children-list {
        list-style-type: none;
        font-size: 12px;
    }

    .header .header-nav-menu .figure-thumb {
        width: 160px;
        height: 110px;
        margin: 0 auto 16px;
        text-align: center;
    }

    .header .header-nav-menu .children-list li {
        position: relative;
        float: left;
        width: 180px;
        padding: 35px 12px 0;
        text-align: center;
    }

    .header .header-nav-menu .children-list li:before {
        position: absolute;
        left: 0;
        top: 35px;
        z-index: 1;
        width: 1px;
        height: 100px;
        content: "";
        background-color: #e0e0e0;
    }

    .header .header-nav-menu .children-list .first:before {
        display: none;
    }

    .header .header-nav-menu .title {
        margin: 0;
        line-height: 20px;
        color: #333;
    }

    .header .header-nav-menu .price {
        margin: 0;
        line-height: 20px;
        color: #ff6700;
    }
</style>